/* eslint-disable react/no-array-index-key */
import React from 'react';
import cn from 'classnames';
import PropTypes from 'prop-types';
import { Card, Tabs, Spin } from 'antd';
import styles from './List.less';

const { TabPane } = Tabs;

const TabsList = ({
    data,
    title,
    activeKey,
    onTabChange,
    loading,
    className
}) => (
    <Card bordered={false} className={cn(className, styles.overflowY)}>
        {title && (
            <h3>{title}</h3>
        )}
        <Tabs activeKey={activeKey} onChange={onTabChange}>
            {data.map((item, index) => (
                <TabPane tab={item.label} key={index}>
                    <Spin spinning={loading}>{item.content}</Spin>
                </TabPane>
            ))}
        </Tabs>
    </Card>
);

TabsList.propTypes = {
    /**
     * 标题
     */
    title: PropTypes.string,
    /**
     * Tab 切换时调用，等于 Tabs 的 onChange
     */
    onTabChange: PropTypes.func,
    /**
     * 渲染项，{ label: '', content: ''}
     */
    data: PropTypes.array
};

TabsList.defaultProps = {
    title: '',
    onTabChange: () => {},
    data: []
};

export default TabsList;
